<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入用户账号" v-decorator="[ 'username', validatorRules.username]" :readOnly="!!model.id"/>
        </a-form-item>

        <template v-if="!model.userId">
          <a-form-item label="登陆密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input type="password" placeholder="请输入登陆密码" v-decorator="[ 'password', validatorRules.password]"/>
          </a-form-item>

          <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登陆密码"
                     v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
          </a-form-item>
        </template>

        <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入手机号码" v-decorator="[ 'phone', validatorRules.phone]"/>
        </a-form-item>

        <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入邮箱" v-decorator="[ 'email', validatorRules.email]"/>
        </a-form-item>

        <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled">
          <a-select
            mode="multiple"
            style="width: 100%"
            placeholder="请选择用户角色"
            optionFilterProp="children"
            v-model="selectedRole">
            <a-select-option v-for="(role,roleindex) in roleList" :key="roleindex.toString()" :value="role.roleId">
              {{ role.roleName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="departDisabled" label="部门分配" hasFeedback>
          <a-tree-select
            style="width:100%"
            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
            :treeData="departTree"
            v-model="model.deptId"
            @change="onSelect"
            placeholder="请选择部门">
          </a-tree-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="departDisabled" label="岗位分配" hasFeedback>
          <a-select
            style="width: 100%"
            placeholder="请选择岗位"
            v-model="model.jobId">
            <a-select-option v-for="(job,index) in jobs" :key="index.toString()" :value="job.id">
              {{ job.jobName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="departDisabled" label="状态" hasFeedback>
          <a-radio-group name="radioGroup" v-model="lockFlag">
            <a-radio value="0">正常</a-radio>
            <a-radio value="1">锁定</a-radio>
          </a-radio-group>
        </a-form-item>

        <!--<a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-upload-->
        <!--listType="picture-card"-->
        <!--class="avatar-uploader"-->
        <!--:showUploadList="false"-->
        <!--:action="uploadAction"-->
        <!--:data="{'isup':1}"-->
        <!--:headers="headers"-->
        <!--:beforeUpload="beforeUpload"-->
        <!--@change="handleChange"-->
        <!--&gt;-->
        <!--<img v-if="picUrl" :src="getAvatarView()" alt="头像" style="height:104px;max-width:300px"/>-->
        <!--<div v-else>-->
        <!--<a-icon :type="uploadLoading ? 'loading' : 'plus'" />-->
        <!--<div class="ant-upload-text">上传</div>-->
        <!--</div>-->
        <!--</a-upload>-->
        <!--</a-form-item>-->


        <!--<a-form-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<j-dict-select-tag  v-decorator="['activitiSync', {}]" placeholder="请选择是否同步工作流引擎" :type="'radio'" :triggerChange="true" dictCode="activiti_sync"/>-->
        <!--</a-form-item>-->

      </a-form>
    </a-spin>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import pick from 'lodash.pick'
  import { queryRoleList } from '@/api/role'
  import { getJobListByDeptId } from '@/api/job'
  import { addUser, updateUser, repeatCheck } from '@/api/user'
  import { queryDepartTreeList, deleteDept, updateDept, batchDeleteDept } from '@/api/dept'

  export default {
    name: 'UserModal',
    components: {},
    data () {
      return {
        departDisabled: false, //是否是我的部门调用该页面
        roleDisabled: false, //是否是角色维护调用该页面
        modalWidth: 800,
        drawerWidth: 700,
        modaltoggleFlag: true,
        confirmDirty: false,
        departTree: [],
        jobs: [],
        selectedDepartKeys: [], //保存用户选择部门id
        checkedDepartKeys: [],
        checkedDepartNames: [], // 保存部门的名称 =>title
        checkedDepartNameString: 0, // 保存部门的名称 =>title
        userId: '', //保存用户id
        disableSubmit: false,
        userDepartModel: { userId: '', departIdList: [] }, // 保存SysUserDepart的用户部门中间表数据需要的对象
        dateFormat: 'YYYY-MM-DD',
        validatorRules: {
          username: {
            rules: [{
              required: true, message: '请输入用户账号!'
            }, {
              validator: this.validateUsername
            }]
          },
          password: {
            rules: [{
              required: true,
              pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
              message: '密码由8位数字、大小写字母和特殊符号组成!'
            }]
          },
          confirmpassword: {
            rules: [{
              required: true, message: '请重新输入登陆密码!'
            }, {
              validator: this.compareToFirstPassword
            }]
          },
          phone: {
            rules: [{
              required: true, message: '请输入手机号'
            }, { validator: this.validatePhone }]
          },
          email: {
            rules: [{ validator: this.validateEmail }]
          },
          role: {
            rules: [{
              required: true, message: '请选择角色'
            }]
          }
        },
        title: '操作',
        visible: false,
        model: {},
        roleList: [],
        selectedRole: [],
        selectedJob: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        uploadLoading: false,
        confirmLoading: false,
        headers: {},
        form: this.$form.createForm(this),
        picUrl: '',
        lockFlag: 0
      }
    },
    methods: {
      //窗口最大化切换
      toggleScreen () {
        if (this.modaltoggleFlag) {
          this.modalWidth = window.innerWidth
        } else {
          this.modalWidth = 800
        }
        this.modaltoggleFlag = !this.modaltoggleFlag
      },
      queryDepartTree () {
        queryDepartTreeList().then((res) => {
          if (res.code == 200) {
            this.departTree = res.data
          }
        })
      },
      initialRoleList () {
        const params = new URLSearchParams()
        params.append('roleName', '')
        queryRoleList(params).then((res) => {
          if (res.code == 200) {
            this.roleList = res.data
          } else {
            console.log(res.message)
          }
        })
      },
      refresh () {
        this.selectedDepartKeys = []
        this.checkedDepartKeys = []
        this.checkedDepartNames = []
        this.checkedDepartNameString = ''
        this.userId = ''
      },
      add () {
        this.picUrl = ''
        this.refresh()
        this.edit({})
      },
      edit (record) {
        // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
        this.resetScreenSize()
        let that = this
        that.queryDepartTree()
        that.initialRoleList()
        this.form.resetFields()
        that.visible = true
        if (Object.keys(record).length != 0) {
          that.userId = record.userId
          that.model.deptId = record.deptId + ''
          this.getJobs(that.model.deptId)
          that.model.jobId = record.jobId
          that.lockFlag = record.lockFlag
          // 用户角色
          for (let i = 0, len = record.roleList.length; i < len; i++) {
            that.selectedRole.push(record.roleList[i].roleId)
          }
          that.model = Object.assign({}, record)
          that.$nextTick(() => {
            that.form.setFieldsValue(pick(this.model, 'username', 'email', 'phone'))
          })
        }
      },
      close () {
        this.$emit('close')
        this.visible = false
        this.disableSubmit = false
        this.selectedRole = []
        this.model = {}
      },
      // 选择部门改变
      onSelect (key) {
        this.getJobs(key)
      },
      // 加载岗位列表
      getJobs (id) {
        this.model.jobId = ''
        getJobListByDeptId(id).then(res => {
          this.jobs = res.data
        })
      },
      // moment,
      handleSubmit () {

        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let avatar = that.model.avatar
            let formData = Object.assign(this.model, values)
            // formData.avatar = avatar
            formData.lockFlag = this.lockFlag
            const userRoles = []
            for (let i = 0, len = this.selectedRole.length; i < len; i++) {
              userRoles.push(this.selectedRole[i])
            }
            formData.roleList = userRoles
            formData.jobId = this.model.jobId != '' ? this.model.jobId : 0

            // that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法
            let obj
            if (!this.model.userId) {
              // formData.userId = this.userId
              obj = addUser(formData)
            } else {
              obj = updateUser(formData)
            }
            obj.then((res) => {
              if (res.code == 200) {
                that.$message.success(res.msg)
                that.$emit('ok')
              } else {
                that.$message.warning(res.msg)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.checkedDepartNames = []
              that.userDepartModel.departIdList = { userId: '', departIdList: [] }

              that.close()
            })

          }
        })
      },
      handleCancel () {
        this.close()
      },
      validateToNextPassword (rule, value, callback) {
        const form = this.form
        const confirmpassword = form.getFieldValue('confirmpassword')

        if (value && confirmpassword && value !== confirmpassword) {
          callback('两次输入的密码不一样！')
        }
        if (value && this.confirmDirty) {
          form.validateFields(['confirm'], { force: true })
        }
        callback()
      },
      compareToFirstPassword (rule, value, callback) {
        const form = this.form
        if (value && value !== form.getFieldValue('password')) {
          callback('两次输入的密码不一样！')
        } else {
          callback()
        }
      },
      validatePhone (rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
            let params = {
              fieldVal: value,
              dataId: this.model.userId
            }
            repeatCheck(params).then((res) => {
              if (res.code == 200 && !res.data) {
                callback()
              } else {
                callback('手机号已存在!')
              }
            })
          } else {
            callback('请输入正确格式的手机号码!')
          }
        }
      },
      validateEmail (rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
            let params = {
              fieldVal: value,
              dataId: this.model.userId
            }
            repeatCheck(params).then((res) => {
              if (res.code == 200 && !res.data) {
                callback()
              } else {
                callback('邮箱已存在!')
              }
            })
          } else {
            callback('请输入正确格式的邮箱!')
          }
        }
      },
      validateUsername (rule, value, callback) {
        let params = {
          fieldVal: value,
          dataId: this.model.userId
        }
        repeatCheck(params).then((res) => {
          if (res.code == 200 && !res.data) {
            callback()
          } else {
            callback('用户名已存在!')
          }
        })
      },
      handleConfirmBlur (e) {
        const value = e.target.value
        this.confirmDirty = this.confirmDirty || !!value
      },
      handleChange (info) {
        this.picUrl = ''
        if (info.file.status === 'uploading') {
          this.uploadLoading = true
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response
          this.uploadLoading = false
          console.log(response)
          if (response.success) {
            this.model.avatar = response.message
            this.picUrl = 'Has no pic url yet'
          } else {
            this.$message.warning(response.message)
          }
        }
      },
      // 搜索用户对应的部门API
      onSearch () {
        this.$refs.departWindow.add(this.checkedDepartKeys, this.userId)
      },

      // 获取用户对应部门弹出框提交给返回的数据
      modalFormOk (formData) {
        this.checkedDepartNames = []
        this.selectedDepartKeys = []
        this.checkedDepartNameString = ''
        this.userId = formData.userId
        this.userDepartModel.userId = formData.userId
        for (let i = 0; i < formData.departIdList.length; i++) {
          this.selectedDepartKeys.push(formData.departIdList[i].key)
          this.checkedDepartNames.push(formData.departIdList[i].title)
          this.checkedDepartNameString = this.checkedDepartNames.join(',')
        }
        this.userDepartModel.departIdList = this.selectedDepartKeys
        this.checkedDepartKeys = this.selectedDepartKeys  //更新当前的选择keys
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize () {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth
        } else {
          this.drawerWidth = 700
        }
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>